<template>
  <div>
    <el-card>
      <el-row :gutter="10">
        <!--参数搜索-->
        <el-col :span="5">
          <el-input placeholder="请输入参数名" v-model="stackerParamListReqForm.stackerParamName">
            <el-button slot="append" icon="el-icon-search" @click="SearchBtnClick"></el-button>
          </el-input>
        </el-col>
        <!--参数地址搜索-->
        <el-col :span="5">
          <el-input placeholder="请输入参数地址" v-model="stackerParamListReqForm.stackerParamAddress">
            <el-button slot="append" icon="el-icon-search" @click="SearchBtnClick"></el-button>
          </el-input>
        </el-col>
        <!--添加用户-->
        <el-col :span="14" style="text-align: right;">
          <el-button type="primary" size="mini" @click="addStackerParamClick">添加</el-button>
        </el-col>
      </el-row>
      <el-table :data="stackerParamList" border>
        <el-table-column label="No" type="index"></el-table-column>
        <el-table-column label="参数名" prop="stackerParamName" min-width="200"></el-table-column>
        <el-table-column label="参数类型" prop="stackerParamType" min-width="200"></el-table-column>
        <el-table-column label="参数地址" prop="stackerParamAddress" min-width="200"></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="stackerParamEditBtnClick(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="stackerParamDeleteBtnClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="stackerParamListReqForm.pageNum"
        :page-sizes="[10, 20, 30, 40]" :page-size="stackerParamListReqForm.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!-- 添加参数-->
    <el-dialog v-dialogDrag title="添加参数" :visible.sync="addStackerParamDialog" width="40%" @opened="addStackerParamDialogOpened"
      :close-on-click-modal="false" center>
      <span style="text-align: center">
        <el-form ref="addStackerParamFormRef" :model="addStackerParamForm" :rules="addStackerParamFormRules" label-position="right"
          label-width="110px">
          <!--堆垛机参数名-->
          <el-form-item label="堆垛机参数名" prop="stackerParamName" v-on:keyup.enter.native="addStackerParam">
            <el-input v-model="addStackerParamForm.stackerParamName"></el-input>
          </el-form-item>
          <!--堆垛机参数地址-->
          <el-form-item label="堆垛机参数类型" prop="stackerParamType" v-on:keyup.enter.native="addProduct">
            <div style="text-align: left;">
              <el-select v-model="addStackerParamForm.stackerParamType" placeholder="请选择" >
                <el-option v-for="item in stackerParamTypeList" :key="item.name" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <!--堆垛机参数类型-->
          <el-form-item label="堆垛机参数地址" prop="stackerParamAddress" v-on:keyup.enter.native="addStackerParam">
            <el-input v-model="addStackerParamForm.stackerParamAddress"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="addStackerParam">添加</el-button>
        </div>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag title="编辑堆垛机参数" :visible.sync="editStackerParamDialog" width="40%" center
      :close-on-click-modal="false">
      <span style="text-align: center">
        <el-form ref="editStackerParamFormRef" :model="editStackerParamForm" :rules="editStackerParamFormRules" label-position="right"
          label-width="110px">
          <!--堆垛机参数名-->
          <el-form-item label="堆垛机参数名" prop="stackerParamName" v-on:keyup.enter.native="editStackerParam">
            <el-input v-model="editStackerParamForm.stackerParamName"></el-input>
          </el-form-item>
          <!--堆垛机参数类型-->
          <el-form-item label="堆垛机参数类型" prop="stackerParamType" v-on:keyup.enter.native="editStackerParam">
            <div style="text-align: left;">
              <el-select v-model="editStackerParamForm.stackerParamType" placeholder="请选择" >
                <el-option v-for="item in stackerParamTypeList" :key="item.name" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <!--堆垛机参数地址-->
          <el-form-item label="堆垛机参数地址" prop="stackerParamAddress" v-on:keyup.enter.native="editStackerParam">
            <el-input v-model="editStackerParamForm.stackerParamAddress"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="editStackerParam">提交</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'StackerParam',
  data () {
    return {
      value: '',
      stackerParamList: [],
      stackerParamTypeList: [
        {
          name: 'int'
        },
        {
          name: 'bool'
        }
      ],
      total: 0,
      addStackerParamDialog: false,
      editStackerParamDialog: false,
      stackerParamListReqForm: {
        pageNum: 1,
        pageSize: 10,
        stackerParamName: '',
        stackerParamAddress: ''
      },
      addStackerParamForm: {
        stackerParamName: '',
        stackerParamType: '',
        stackerParamAddress: ''
      },
      editStackerParamForm: {
        stackerParamId: -1,
        stackerParamName: '',
        stackerParamType: '',
        stackerParamAddress: ''
      },
      addStackerParamFormRules: {
        stackerParamName: [{
            required: true,
            message: '请输入参数名',
            trigger: 'blur'
          }
        ],
        stackerParamType: [{
            required: true,
            message: '请输入参数类型',
            trigger: 'blur'
          }
        ],
        stackerParamAddress: [{
            required: true,
            message: '请输入参数地址',
            trigger: 'blur'
          }
        ]
      },
      editStackerParamFormRules: {
        stackerParamName: [{
            required: true,
            message: '请输入参数名',
            trigger: 'blur'
          }
        ],
        stackerParamType: [{
            required: true,
            message: '请输入参数类型',
            trigger: 'blur'
          }
        ],
        stackerParamAddress: [{
            required: true,
            message: '请输入参数地址',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    async getStackerParamList() {
      const res = await this.$apiUtil.postByJson('stackerParam/stackerParamList', this.stackerParamListReqForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.stackerParamList = res.data.stackerParamVOS
      this.total = res.data.totalSize
    },
    handleSizeChange(newSize) {
      this.stackerParamListReqForm.pageSize = newSize
      this.getStackerParamList()
    },
    handleCurrentChange (newPage) {
      this.stackerParamListReqForm.pageNum = newPage
      this.getStackerParamList()
    },
    SearchBtnClick() {
      this.getStackerParamList()
    },
    addStackerParamClick () {
      this.addStackerParamDialog = true
    },
    addStackerParamDialogOpened() {
      this.$refs.addStackerParamFormRef.resetFields()
    },
    async addStackerParam() {
      const res = await this.$apiUtil.postByJson('stackerParam/addStackerParam', this.addStackerParamForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.$message.success('添加堆垛机参数成功')
      this.getStackerParamList()
      this.addStackerParamDialog = false
    },
    stackerParamEditBtnClick(row) {
      this.editStackerParamForm.stackerParamId = row.stackerParamId
      this.editStackerParamForm.stackerParamName = row.stackerParamName
      this.editStackerParamForm.stackerParamType = row.stackerParamType
      this.editStackerParamForm.stackerParamAddress = row.stackerParamAddress
      this.editStackerParamDialog = true
    },
    async editStackerParam() {
      const res = await this.$apiUtil.postByJson('stackerParam/editStackerParam', this.editStackerParamForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.$message.success('编辑堆垛机参数成功')
      this.getStackerParamList()
      this.editStackerParamDialog = false
    },
    async stackerParamDeleteBtnClick(row) {
      this.$alert('确定删除堆垛机参数:' + row.stackerParamName + ' ! ! !', '提示', {
        confirmButtonText: '确定',
        center: true,
        callback: async action => {
          if (action === 'confirm') {
            const res = await this.$apiUtil.postByForm('stackerParam/deleteStackerParam', {
              stackerParamId: row.stackerParamId
            })
            console.log(res)
            if (res.code !== '200') {
              return this.$message.error(res.msg)
            }
            this.$message.success('删除堆垛机参数成功')
            this.getStackerParamList()
          }
        }
      })
    }
  },
  mounted() {
    this.getStackerParamList()
  }
}
</script>

<style lang="less" scoped>
</style>
